<style lang="less" scoped>

.xl_data{
  background: white;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  width: 61vw;
  margin-left: 18.5vw;
  .cailiaotitle{
    font-size: 1.1vw;
  }
  .cailiaolist_data{
    min-height: 39vw;
  }
  
  .xl_title{
    width: 100%;
    text-align:center;
    font-size: 1vw;
    height: 3vw;
  }
  .cl_img{
    position:relative;
    width: 100%;
    height: 9.3vw;
    .xl_img{
      cursor:pointer;
      position: absolute;
      width: 100%;
      height: 9.3vw;
      border: 1px solid #dededd;
    }
    .cl_new{
      position: absolute;
      width:33%;
      right:0px;
      bottom: 0px;
    }
  }
  
}
</style>
<template>
  <div >
    <MainUser></MainUser>
    <div v-if="size>24" style="height:3.2vw"></div>
    <affix v-if="size>24" style="margin-top:-3.2vw">
      <MainTitle @cailiao="downcailiao" @sousuo="titleSousuo"></MainTitle>
    </affix>
    <MainTitle v-if="size<=24" @cailiao="downcailiao" @sousuo="titleSousuo"></MainTitle>
    <div class="xl_data">
      <div style="height:0.5vw;"></div>
      <div class="cailiaotitle">{{title}}</div>
      <div class="cailiaolist_data" v-loading="loading">
        <el-row :gutter="10" >
          <el-col :span="4" v-for="(item,i) in materialgallerys">
            <div class="cl_img">
              <el-image 
                class="xl_img" 
                :src="item.thumb" 
                :preview-src-list="[item.thumb]">
              </el-image>
              <el-image 
                class="cl_new" 
                v-if="item.is_new"
                :src="newimg">
              </el-image>
            </div>
            
            <!-- <img class="xl_img" :src="item.thumb"/> -->
            <div class="xl_title">{{item.title}}</div>
          </el-col>
        </el-row>
      </div>
      <div style="height:1vw;"></div>
      <el-pagination
        background
        style="text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next,sizes"
        :current-page="pagintion.page"
        :page-sizes="pagesizes"
        :page-size="pagintion.page_size"
        :total="pagintion.total">
      </el-pagination>
      <div style="height:1vw;"></div>
    </div>
    
  </div>
</template>
<script>
import MainTitle from '../main_title'
import MainUser from '../main_user'
import { materialgallery } from '@/request/api';
export default {
    data() {
        return {
          newimg:require('../../../images/new.png'),
          id:'',
          title:'',
          materialgallerys:[],
          pagintion: {
            total: 0,
            page_size:50,
            page: 1,
          },
          loading:false,
          pagesizes: [30,50,100],
          keywords:'',
          size:0
        }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.title = this.$route.query.title;
      this.getmaterialgallerys();
    },
    methods: {
        pianyi(i){
            if(i%5 == 0){
                return 2;
            }else{
                return 0;
            }
        },
        setarray(url){
          return [url];
        },
        //修改条数
        handleSizeChange(val){
          this.pagintion.page_size = val;
          this.getmaterialgallerys();
        },
        //翻页
        handleCurrentChange(val) {
            this.pagintion.page = val;
            this.getmaterialgallerys();
        },
        //获取系列列表数据
        getmaterialgallerys(){
          var param = {};
          param.page = this.pagintion.page;
          param.size = this.pagintion.page_size;
          param.material_id = this.id;
          param.keywords = this.keywords;
          this.loading = true;
          materialgallery(param).then(res => {
            this.loading = false;
            if(res.ok){
                this.materialgallerys = res.data.data;
                this.size = this.materialgallerys.length;
                this.pagintion.total = res.data.total;
            }
          })
        },
        downcailiao(id,title){
          this.$router.push({ name: 'jlb_cailiao' ,query: {'id': id,'title': title}});
          this.id = this.$route.query.id;
          this.title = this.$route.query.title;
          this.keywords = "";
          this.getmaterialgallerys();
          // let routeUrl = this.$router.resolve({
          //     path: 'jlb_cailiao',
          //     query: {'id': id}
          // });
          // window.open(routeUrl.href);
        },
        titleSousuo(keywords){
          this.keywords = keywords;
          this.getmaterialgallerys();
        }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
